<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title> User List</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>

    <link th:href="@{/css/plugins/toastr/toastr.min.css}" rel="stylesheet" />

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <style>
        .btn-custom {
            margin-bottom: 5px;
            margin-top: 22px;
        }
    </style>

</head>
<body>
<div id="wrapper">
    <div th:include="common/navbar_left :: navbar_left"></div>
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom" th:include="common/navbar_header :: navbar_header"></div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>Look For Friends</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li class="active">
                        <strong>Students</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <form method="post" th:action="@{/student/search}">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="name">User Name</label>
                                            <input type="text" id="name" name="name" th:value="${student.name}"
                                                   placeholder="User Name" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="email">Email</label>
                                            <input type="text" id="email" name="email" th:value="${student.email}"
                                                   placeholder="Email" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="university">University</label>
                                            <input type="text" id="university" name="university" th:value="${student.university}"
                                                   placeholder="University" class="form-control"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="major">Major</label>
                                            <input type="text" id="major" name="major" value=""
                                                   placeholder="Major" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="gpa">GPA</label>
                                            <div class="input-group m-b">
                                                <div class="input-group-btn">
                                                    <button id="gpa-action" data-toggle="dropdown" class="btn btn-white dropdown-toggle"
                                                            type="button"><span class="caret"></span></button>
                                                    <ul class="dropdown-menu" style="min-width: 40px;">
                                                        <li><a th:onclick="'changeAction(\''+all+'\')'"  style="text-align: center"> all </a></li>
                                                        <li><a th:onclick="'changeAction('+'\'=\''+')'"  style="text-align: center"> = </a></li>
                                                        <li><a th:onclick="'changeAction('+'\'&lt;\''+')'" style="text-align: center">&lt;</a></li>
                                                        <li><a th:onclick="'changeAction('+'\'&gt;\''+')'" style="text-align: center">&gt;</a></li>
                                                    </ul>
                                                </div>
                                                <input type="hidden" id="gpaSearchFlag" name="gpaSearchFlag" value="0"/>
                                                <input type="text" id="gpa" name="gpa" th:value="${student.gpa}"
                                                       placeholder="GPA" class="form-control"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label class="control-label" for="resume">Resume</label>
                                            <input type="text" id="resume" name="resume" th:value="${student.resume}"
                                                   placeholder="Resume" class="form-control"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-custom">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>User List</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content" style="">
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>User ID</th>
                                    <th>User Name</th>
                                    <th>Email</th>
                                    <th>University</th>
                                    <th>Major</th>
                                    <th>GPA</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="s,index: ${studentList}">
                                    <th class="col-md-1" th:text="${index.index} + 1"></th>
                                    <th class="col-md-1" th:text="${s.sId}"></th>
                                    <th class="col-md-1" th:text="${s.name}"></th>
                                    <th class="col-md-2" th:text="${s.email}"></th>
                                    <th class="col-md-2" th:text="${s.university}"></th>
                                    <th class="col-md-2" th:text="${s.major}"></th>
                                    <th class="col-md-1" th:text="${s.gpa}"></th>
                                    <th class="col-md-2">
                                        <a th:href="@{/student/detail(sId = ${s.sId})}"><i class="fa fa-check text-navy">Detail</i></a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <a th:onclick="'applyForFriend(\''+${s.sId}+'\')'">
                                            <i class="fa fa-check text-navy"><span>Apply</span></i>
                                        </a>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <a data-toggle="modal" data-target="#myModal5"
                                           th:onclick="'initMessageBox(\''+ ${s.sId}  +'\',\''+${s.name}+'\')'"
                                        th:if="${session.user_flag} == '0'">
                                            <i class="fa fa-check text-navy"><span>Messages</span></i>
                                        </a>
                                    </th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Message</h4>
                        <small class="font-bold">Connect and message to him(her).</small>
                    </div>
                    <div class="modal-body" style="height: 400px">
                        <input type="hidden" id="msgBox-sId" />
                        <input type="hidden" id="msgBox-sName" />
                        <textarea id="msgBox-msg" name="message" maxlength="500" placeholder="Write message here!" style="width: 100%;height: 100%;"></textarea>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="msgBox-btn-cancel" class="btn btn-white" data-dismiss="modal">Close</button>
                        <button type="button" th:onclick="'sendMsg()'"  class="btn btn-primary">Forward</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <strong>Copyright</strong> Jobster &copy; 2018
            </div>
        </div>
    </div>
</div>
<!-- Mainly scripts -->
<div th:include="common/common_js :: common_js"></div>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>

<script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>

<script th:inline="javascript" type="text/javascript">
    //<![CDATA[
    $(function () {

    });
    var basePath =[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    function applyForFriend(sId){
        $.ajax({
            url : basePath +"/message/apply/friend",
            type : "GET",
            contentType: "application/json;charset=utf-8",
            data : {'sId':sId},
            dataType : "json",
            success : function(result) {
                if (result.success) {
                    toastr.success(result.respMessage);
                }else{
                    toastr.error(result.respMessage);
                }
            },
            error:function(msg){
                console.info(msg);
                toastr.warn(msg);
            }
        })
    }

    function initMessageBox(sId,sName){
        $('#msgBox-sId').val(sId);
        $('#msgBox-sName').val(sName);
    }

    function sendMsg(){
        // language=JQuery-CSS
        var sId = $('#msgBox-sId').val();
        var sName = $('#msgBox-sName').val();
        // language=JQuery-CSS
        var msg = $('#msgBox-msg').val();

        $.ajax({
            url : basePath +"/message/sendMsg",
            type : 'POST',
            contentType: "application/json;charset=utf-8",
            data : JSON.stringify({'sId':sId,'sName':sName,'msg':msg}),
            dataType : "json",
            success : function(result) {
                if (result.success) {
                    $('#msgBox-btn-cancel').click();
                    toastr.success(result.respMessage);

                }else{
                    toastr.error(result.respMessage);
                }
            },
            error:function(msg){

            }
        })
    }

    function changeAction(action){
        $('#gpa-action').html(action);
        if ("all" === action){
            $('#gpaSearchFlag').val("0");
        } else if ("=" === action) {
            $('#gpaSearchFlag').val("1");
        } else if ("<" === action) {
            $('#gpaSearchFlag').val("2");
        } else if (">" === action) {
            $('#gpaSearchFlag').val("3");
        }
    }
    
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-top-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "7000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }
    //]]>
</script>
</body>
</html>
